package com.example.app.pages.main.home.addNew.addRecord

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.width
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import com.example.app.cls.MyState
import com.example.app.components.MyListItem.MyListItem
import com.example.app.components.MyScaffold.MyCustomScaffold
import com.example.app.components.MyTextField.MyTextField
import com.example.app.components.MyTextField.MyTextFieldState

class IncomeAddRelationState : MyState() {
}

var incomeAddRelationTextFieldState = MyTextFieldState()
@Composable
fun IncomeAddRelation(
        incomeAddRelationPageState: IncomeAddRelationState,
        addRecordState: AddRecordState
) {
    var visible = incomeAddRelationPageState.visible.collectAsState()
    var windowWidth = with(LocalDensity.current) {
        LocalConfiguration.current.screenWidthDp
    }
    var animateDpAsState =
        animateDpAsState(targetValue = if (visible.value) 0.dp else -windowWidth.dp)
    var textFieldValue = incomeAddRelationTextFieldState.textFieldValue.collectAsState()
    MyCustomScaffold(
        modifier = Modifier
            .offset(x = animateDpAsState.value)
            .width(windowWidth.dp)
            .fillMaxHeight()
            .background(MaterialTheme.colorScheme.background)
    ) {
        MyListItem(colors = ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.background),
            headlineContent = {
                MyTextField(myTextFieldState = incomeAddRelationTextFieldState,
                    value = textFieldValue.value,
                    onValueChange = {
                        incomeAddRelationTextFieldState.flowUpdate_textFieldValue(it)
                    })
            })
    }
}